import React from 'react';
import Alert from '@material-ui/lab/Alert';
import { date_to_str, KDateTime, loc, Ret, for_obj, WaitUmd, KInput, KFind, KSwitch, is_disable, useKForm, Title,
    is_empty, PanelTitle, Btn } from 'sui';

const HandView = ({ umd, act, title, col, ck, hcancel }) => {
    const form = useKForm(umd.cur);

    if (is_empty(col)) {
        return null;
    }

    const hok = () => {
        if (form.isErr(ck)) {
            return;
        }

        const ret = {};

        for_obj(ck, (k) => {
            ret[k] = form.get(k);
        });

        col.forEach(d => {
            const sn = d.sn;

            if (d.tp === "num") {
                const v = ret[sn];
                ret[sn] = parseInt(v, 10);
            }
            else if (d.ctp === "datetime" || d.tp === "date") {
                const v = ret[sn];
                ret[sn] = date_to_str(v);
            }
        });

        form.clear();
        umd.act(act, ret, () => umd.hreturn());
    };

    const getItem = (data) => {
        const ret = [];

        data.forEach(d => {
            const ctp = d.ctp;

            if (ctp === "auto") {
                ret.push(<KInput key={d.sn} label={`${d.name} ( ${loc("l_771")} )`} form={form} name={d.sn} disabled={true} className="mr-3"/>);
            }
            else if (ctp === "list") {
                if (d.sn === "sn") {
                    ret.push(<KFind key={d.sn} label={d.name} form={form} name={d.sn} list={d.ctl} disabled={is_disable(umd.cur, "sn")} className="mr-3"/>);
                } else {
                    ret.push(<KFind key={d.sn} label={d.name} form={form} name={d.sn} list={d.ctl} className="mr-3"/>);
                }
            }
            else if (ctp === "switch") {
                ret.push(<KSwitch key={d.sn} label={d.name} form={form} name={d.sn} className="mr-3"/>);
            }
            else if (ctp === "datetime" || d.tp === "date") {
                ret.push(<KDateTime key={d.sn} label={d.name} form={form} name={d.sn}/>);
            }
            else if (ctp === "ignore") {
                return;
            }
            else {
                if (d.sn === "sn") {
                    ret.push(<KInput key={d.sn} label={d.name} form={form} name={d.sn} disabled={is_disable(umd.cur, "sn")} className="mr-3"/>);
                } else {
                    ret.push(<KInput key={d.sn} label={d.name} form={form} name={d.sn} className="mr-3"/>);
                }
            }
        });

        return ret;
    };

    const getCtl = () => {
        const tmp = col.filter(d => d.opt !== "Y");
        if (is_empty(tmp)) {
            return null;
        }

        return (
            <div className="mt-3 flex flex-row flex-wrap">
                {getItem(tmp)}
            </div>
        );
    };

    const getOpt = () => {
        const tmp = col.filter(d => d.opt === "Y");
        if (is_empty(tmp)) {
            return null;
        }

        return (
            <div className="mt-3 flex flex-col">
                <Alert severity="info" className="text-3xl my-2">{loc("l_218")}</Alert>
                <div className="mt-3 flex flex-row flex-wrap">
                    {getItem(tmp)}
                </div>
            </div>
        );
    };

    const Right = () => (
        <div className="inline-flex">
            <Ret hcmd={hcancel ? hcancel : umd.hreturn}/>
            <Btn hcmd={hok} color="green" className="ml-3">{loc("l_541")}</Btn>
        </div>
    );

    return (
        <div className="flex flex-col">
            <PanelTitle left={<Title mod={title} sub={loc("l_191")}/>} cl="green" right={<Right/>}/>
            <div className="flex ml-4 flex-col">
                {getCtl()}
                {getOpt()}
            </div>
            <WaitUmd umd={umd}/>
        </div>
    );
};

export {HandView};
